<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<style>
			.tool-bar {
				position: fixed;
				top: 30%;
				right: 0;

				display: flex;
				flex-direction: column;
				align-items: center;

				width: 35px;
			}

			.item {
				position: relative;
				width: 35px;
				height: 35px;
				margin-bottom: 1px;

				background-color: #7a6e6e;
				border-radius: 3px 0 0 3px;
			}

			.icon {
				display: inline-block;
				width: 100%;
				height: 100%;
				cursor: pointer;
				background-image: url(./img/toolbars.png);
				pointer-events: none;
			}

			.name {
				position: absolute;
				z-index: -1;
				right: 35px;
				top: 0;

				width: 0;
				height: 35px;
				line-height: 35px;

				color: #fff;
				text-align: center;
				font-size: 12px;
				background-color: #7a6e6e;
				cursor: pointer;

				border-radius: 3px 0 0 3px;
				transition: width 0.2s ease;

				pointer-events: none;
			}

			.item:hover,
			.item:hover .name {
				background-color: #cd1926;
			}
		</style>
	</head>
	<body>
		<div class="tool-bar">
			<div class="item">
				<i class="icon"></i>
				<div class="name">购物车</div>
			</div>
			<div class="item">
				<i class="icon"></i>
				<div class="name">收藏</div>
			</div>
			<div class="item">
				<i class="icon"></i>
				<div class="name">限时活动</div>
			</div>
			<div class="item">
				<i class="icon"></i>
				<div class="name">大礼包</div>
			</div>
		</div>

		<script>
			var toolbarEl = document.querySelector('.tool-bar') // as HTMLDivElement
			var iconsEl = toolbarEl.querySelectorAll('.icon')

			iconsEl.forEach(function (iconEl, index) {
				iconEl.style.backgroundPosition = `-48px -${50 * index}px`
			})

			// 方式一: mouseEnter/mouseleave(不能使用事件委托)
			/* var itemsEl = toolbarEl.querySelectorAll('.item')

			for (var i = 0; i < itemsEl.length; i++) {
				var itemEl = itemsEl[i] // as HTMLDivElement

				itemEl.onmouseenter = function (e) {
					var nameEl = this.children[1]
					nameEl.style.width = '62px'
				}

				itemEl.onmouseleave = function (e) {
					var nameEl = this.children[1]
					nameEl.style.width = '0px'
				}
			} */

			// 方式二: mouseover(使用事件委托)
			/* toolbarEl.onmouseover = function (e) {
				handleMouseEvent(e, '62px')
			}
			toolbarEl.onmouseout = function (e) {
				handleMouseEvent(e, '0px')
			}

			function handleMouseEvent(event, width) {
				if (event.target !== toolbarEl) {
					var itemEl = event.target.classList.contains('item') ? event.target : event.target.parentElement
					var nameEl = itemEl.children[1]
					nameEl.style.width = width
				}
			} */

			// 事件禁止
			toolbarEl.onmouseover = function (event) {
				var naemEl = event.target.querySelector('.name')
				naemEl.style.width = '62px'
			}

			toolbarEl.onmouseout = function (event) {
				var naemEl = event.target.querySelector('.name')
				naemEl.style.width = '0px'
			}
		</script>
	</body>
</html>
